<!--
  Generated template for the CardPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

 	<ion-navbar>
    	<ion-title>我的商品</ion-title>
	  </ion-navbar>
	  
	<div>
		<ion-segment [(ngModel)]="segmentModel" class="tihuo-viewpage" (click)="swipeEvnet($event)">
			<ion-segment-button value="kittens" id="kittens">
				全部
			</ion-segment-button>
			<ion-segment-button value="mobile" id="mobile">
				移动卡
			</ion-segment-button>
			<ion-segment-button value="jd" id="jd">
				京东卡
			</ion-segment-button>
			<ion-segment-button value="unicom" id="unicom">
				联通卡
			</ion-segment-button>
			<ion-segment-button value="telcom" id="telcom">
				电信卡
			</ion-segment-button>
	
		</ion-segment>
	</div>
</ion-header>


<ion-content >
	
	<div  class="swipe card-list" >
		<ion-slides (ionSlideWillChange)="slideChanged(slides)" #slides>
		
			<ion-slide >
				<div *ngIf="card['all'] == 0" class="null">
					<img src="./assets/imgs/nothing.png" alt="">
					<span>这个卡包是空的~</span>
				</div>
				<div *ngIf="card['all'] == 1" class="order-list">
					<div *ngIf="currentIndex !=0">
						<div class="loading">
							<ion-spinner item-start name="dots"></ion-spinner>
						</div>
					</div>
					<div *ngIf="currentIndex ==0">
						<div class="order-info" *ngFor="let item of data['all']">
							<div class="goods-img">
								<img src="{{item.goods_image}}" alt="">
							</div>
							<div class="goods-title">
								<span>{{item.goods_name}}</span>
								<span>X{{item.goods_num}}</span>
							</div>
							<div class="btn" (click)="tihuo(item.id,item.card_type)">
								<span>提货</span>
							</div>
						</div>
					</div>
					
				</div>
				<ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading">
					<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
					</ion-infinite-scroll-content>
				</ion-infinite-scroll>
			</ion-slide>
		
			<ion-slide >
				<div *ngIf="card['mobile'] == 0" class="null">
					<img src="./assets/imgs/nothing.png" alt="">
					<span>这个卡包是空的~</span>
				</div>
				<div *ngIf="card['mobile'] == 1" class="order-list">
					<div *ngIf="currentIndex !=1">
						<div class="loading">
							<ion-spinner item-start name="dots"></ion-spinner>
						</div>
					</div>
					<div *ngIf="currentIndex ==1">
						<div class="order-info" *ngFor="let item of data['mobile']">
							<div class="goods-img">
								<img src="{{item.goods_image}}" alt="">
							</div>
							<div class="goods-title">
								<span>{{item.goods_name}}</span>
								<span>X{{item.goods_num}}</span>
							</div>
							<div class="btn" (click)="tihuo(item.id,item.card_type)">
								<span>提货</span>
							</div>
						</div>
					</div>
					
				</div>
				<ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading">
					<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
					</ion-infinite-scroll-content>
				</ion-infinite-scroll>
			</ion-slide>
		
			<ion-slide >
				<div *ngIf="card['jd'] == 0" class="null">
					<img src="./assets/imgs/nothing.png" alt="">
					<span>这个卡包是空的~</span>
				</div>
				<div *ngIf="card['jd'] == 1" class="order-list">
					<div *ngIf="currentIndex !=2">
						<div class="loading">
							<ion-spinner item-start name="dots"></ion-spinner>
						</div>
					</div>
					<div *ngIf="currentIndex ==2">
						<div class="order-info" *ngFor="let item of data['jd']">
							<div class="goods-img">
								<img src="{{item.goods_image}}" alt="">
							</div>
							<div class="goods-title">
								<span>{{item.goods_name}}</span>
								<span>X{{item.goods_num}}</span>
							</div>
							<div class="btn" (click)="tihuo(item.id,item.card_type)">
								<span>提货</span>
							</div>
						</div>
					</div>
					
				</div>
				<ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading">
					<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
					</ion-infinite-scroll-content>
				</ion-infinite-scroll>
			</ion-slide>

			<ion-slide >
				<div *ngIf="card['unicom'] == 0" class="null">
					<img src="./assets/imgs/nothing.png" alt="">
					<span>这个卡包是空的~</span>
				</div>
				<div *ngIf="card['unicom'] == 1" class="order-list">
					<div *ngIf="currentIndex !=3">
						<div class="loading">
							<ion-spinner item-start name="dots"></ion-spinner>
						</div>
					</div>
					<div *ngIf="currentIndex ==3">
						<div class="order-info" *ngFor="let item of data['unicom']">
							<div class="goods-img">
								<img src="{{item.goods_image}}" alt="">
							</div>
							<div class="goods-title">
								<span>{{item.goods_name}}</span>
								<span>数量:{{item.goods_num}}</span>
							</div>
							<div class="btn" (click)="tihuo(item.id,item.card_type)">
								<span>提货</span>
							</div>
						</div>
					</div>
					
				</div>
				<ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading">
					<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
					</ion-infinite-scroll-content>
				</ion-infinite-scroll>
			</ion-slide>
			
			<ion-slide >
				<div *ngIf="card['telcom'] == 0" class="null">
					<img src="./assets/imgs/nothing.png" alt="">
					<span>这个卡包是空的~</span>
				</div>
				<div *ngIf="card['telcom'] == 1" class="order-list">
					<div *ngIf="currentIndex !=4                   ">
						<div class="loading">
							<ion-spinner item-start name="dots"></ion-spinner>
						</div>
					</div>
					<div *ngIf="currentIndex ==4">
						<div class="order-info" *ngFor="let item of data['telcom']">
							<div class="goods-img">
								<img src="{{item.goods_image}}" alt="">
							</div>
							<div class="goods-title">
								<span>{{item.goods_name}}</span>
								<span>数量:{{item.goods_num}}</span>
							</div>
							<div class="btn" (click)="tihuo(item.id,item.card_type)">
								<span>提货</span>
							</div>
						</div>
					</div>
					
				</div>
				<ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading">
					<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
					</ion-infinite-scroll-content>
				</ion-infinite-scroll>
			</ion-slide>
		
		</ion-slides>
	</div>
	
</ion-content>
